<template>
  <div style="height: 100%; width: 100%; position: relative;">
    <div class="report-system" :style="reportSystem">
      <div style="z-index: -99; position:absolute; left:10px;top:10px;">
        <input type="password" v-model="cardbarcode" autocomplete="off" id="barcodediv" autofocus onblur="this.focus()"
          @keypress="cardbarkeypress" @keyup.enter="query">
      </div>
      <rm-layout-top splitcolor="#F8F8FF" :splitwidth="0" :fixsize="300">
        <template v-slot:fix>
          <div style="display: flex; height: 100%; color: #f8f8ff;overflow: hidden; border-radius:8px 8px 0 0;">
            <div style="align-self: flex-end; width: 100%;">
              <div class="queuename" style="text-align:center; margin-bottom:15vh;">
                {{ localqueuedevicename }}</div>
              <div class="tips" style="text-align:center;">{{ inpbarcodeTip }}</div>
              <div class="fakeinput">
                {{ txtbarcode }}
                <div class="fakebarcodeinput">{{ txtbarcode }}</div>
              </div>
            </div>
          </div>
        </template>
        <div style="display: flex; height: 100%;">
          <div style="align-self: flex-start; width: 100%; margin:35px;">
            <table class="table3style" style="margin:auto;" border="0">
              <tr>
                <td>
                  <el-image :src="pimgUrl7" class="imgstyle4" @click.native="getPImg('7')">
                  </el-image>
                </td>
                <td>
                  <el-image :src="pimgUrl8" class="imgstyle4" @click.native="getPImg('8')">
                  </el-image>
                </td>
                <td>
                  <el-image :src="pimgUrl9" class="imgstyle4" @click.native="getPImg('9')">
                  </el-image>
                </td>
                <td>
                  <el-image :src="pimgUrlX" class="imgstyle4" @click.native="getPImg('X')">
                  </el-image>
                </td>
              </tr>
              <tr>
                <td>
                  <el-image :src="pimgUrl4" class="imgstyle4" @click.native="getPImg('4')">
                  </el-image>
                </td>
                <td>
                  <el-image :src="pimgUrl5" class="imgstyle4" @click.native="getPImg('5')">
                  </el-image>
                </td>
                <td>
                  <el-image :src="pimgUrl6" class="imgstyle4" @click.native="getPImg('6')">
                  </el-image>
                </td>
                <td>
                  <el-image :src="pimgUrlBACKSPACE" class="imgstyle4" @click.native="getPImg('space')">
                  </el-image>
                </td>
              </tr>
              <tr>
                <td>
                  <el-image :src="pimgUrl1" class="imgstyle4" @click.native="getPImg('1')">
                  </el-image>
                </td>
                <td>
                  <el-image :src="pimgUrl2" class="imgstyle4" @click.native="getPImg('2')">
                  </el-image>
                </td>
                <td>
                  <el-image :src="pimgUrl3" class="imgstyle4" @click.native="getPImg('3')">
                  </el-image>
                </td>
                <td>
                  <el-image :src="pimgUrlQX" class="imgstyle4" @click.native="btnCancel()">
                  </el-image>
                </td>
              </tr>
              <tr>
                <td>
                  <el-image :src="pimgUrl0" class="imgstyle4" @click.native="getPImg('0')">
                  </el-image>
                </td>
                <td>
                  <el-image :src="pimgUrlZ" class="imgstyle4" @click.native="getPImg('Z')">
                  </el-image>
                </td>
                <td>
                  <el-image :src="pimgUrlG" class="imgstyle4" @click.native="getPImg('G')">
                  </el-image>
                </td>
                <td>
                  <el-image :src="pimgUrlQD" class="imgstyle4" @click.native="btnConfirm()">
                  </el-image>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </rm-layout-top>
      <div class="pagebottom">
        <el-image :src="imgUrlDB" class="pagebottomimg"></el-image>
      </div>
    </div>
    <!--网络连接中断提示-->
    <el-dialog :append-to-body="true" :close-on-click-modal="false" :show-close="false" title="网络连接中断"
      :visible.sync="connectErr">
      <div class="err-div">网络故障，暂停服务</div>
    </el-dialog>
    <!--错误提示框-->
    <el-dialog :append-to-body="true" :close-on-click-modal="false" width="80%" title="提示" :visible.sync="showtips">
      <div class="tip-div">{{ msgtips }}</div>
    </el-dialog>
    <!--取号成功显示信息-->
    <el-dialog :append-to-body="true" :close-on-click-modal="false" width="300px" title="提示"
      :visible.sync="showsucessinfo">
      <div>
        <div class="sucess-div">取号成功！</div>
        <div class="sucess-info">姓 名：{{ queue_patname }}</div>
        <div class="sucess-info">卡 号：{{ queue_patno }}</div>
        <div class="sucess-info">排队号：{{ queue_queueno }}</div>
        <div class="sucess-info">您面前还有{{ queue_waitno }}人在等候</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Alert } from 'element-ui';
import XEUtils from "xe-utils"; //引入工具类
export default {
  name: "REQ130",
  data() {
    return {
      reportSystem: {
        backgroundImage: "",
      },
      pimgUrl0: require("@/assets/img/b0_lis4z0.png"),
      pimgUrl1: require("@/assets/img/b1_lis4z0.png"),
      pimgUrl2: require("@/assets/img/b2_lis4z0.png"),
      pimgUrl3: require("@/assets/img/b3_lis4z0.png"),
      pimgUrl4: require("@/assets/img/b4_lis4z0.png"),
      pimgUrl5: require("@/assets/img/b5_lis4z0.png"),
      pimgUrl6: require("@/assets/img/b6_lis4z0.png"),
      pimgUrl7: require("@/assets/img/b7_lis4z0.png"),
      pimgUrl8: require("@/assets/img/b8_lis4z0.png"),
      pimgUrl9: require("@/assets/img/b9_lis4z0.png"),

      pimgUrlG: require("@/assets/img/lis4z0_bg.png"),
      pimgUrlX: require("@/assets/img/lis4z0_bx.png"),
      pimgUrlZ: require("@/assets/img/lis4z0_bz.png"),
      pimgUrlBACKSPACE: require("@/assets/img/lis4z0_backspace.png"),
      pimgUrlQD: require("@/assets/img/bok_lis4z0.png"), //确定
      pimgUrlQX: require("@/assets/img/bcancel_lis4c0.png"), //取消
      pimgUrlDB: require("@/assets/img/lis4z0_comname.png"),
      imgUrlDB: require("@/assets/img/lis4z0_comname.png"),
      // pimgUrlTS: require("@/assets/img/tishi_lis4z0.png"), //提示
      txtbarcode: '',
      inpbarcodeTip: "",
      localqueuedevicename: "",
      cardbarcode: "", //扫码出来的
      resetFlag: 0,//界面输入间隔N秒后无输入，清空界面
      connectErr: false,
      timer: 0,
      queueprintstyle: "",
      showtips: false,
      msgtips: "",
      showsucessinfo: false,
      queue_patname: "",
      queue_patno: "",
      queue_queueno: "",
      queue_waitno: "",
    }
  },
  watch: {
    cardbarcode(val) {
      //设备故障，网络报错时，不允许输入
      if (!this.connectErr) {
        this.txtbarcode = val;
      }
    },
  },
  created() {
    this.getoption(); //初始化选项
    this.initimg(); //初始化图片
  },
  mounted() {
    // 调用相应的接口，网页不断连接服务器，若连接不成，弹窗提醒
    this.testConnect();

    if (this.timer) {
      clearInterval(this.timer);
    } else {
      this.timer = setInterval(() => {
        // 每间隔两秒自动聚焦到输入框
        if (!this.connectErr) {
          if (this.txtbarcode == "") {
            if (document.activeElement.id != "barcodediv") {
              this.setFocus();
            }
          }
        } else {
          if (document.activeElement.id != "barcodediv") {
            this.setFocus();
          }
        }
      }, 2000);
    }
  },
  destroyed() {
    clearInterval(this.timer);
  },
  updated() { },
  methods: {
    setFocus() {
      let ctrl = document.getElementById("barcodediv");
      if (ctrl) {
        ctrl.focus();
      }
    },
    getoption() {
      this.$tool
        .request({
          url: "REQ/REQ1/REQ130",
          method: "post",
          data: {
            action: "getoption",
          },
        })
        .then((res) => {
          console.log(res, '参数');
          this.inpbarcodeTip = res.inputtips; //输入框文字提示
          this.localqueuedevicename = res.localqueuedevicename; //自助排队机名称
          this.queueprintstyle = res.queueprintstyle; //排队打印标签样式
        })
    },
    initimg() {
      this.$tool
        .request({
          url: "REQ/REQ1/REQ130",
          method: "post",
          data: {
            action: "initimg",
          },
        })
        .then((res) => {
          console.log(res, '图片');
          if (res.mainbackgroundpic) {
            this.reportSystem.backgroundImage = "url(" + res.mainbackgroundpic + ")";
          } else {
            this.reportSystem.backgroundImage = "url(" + require("@/assets/img/LIS420/background.png") + ")";
          }
        })
        .catch((e) => {
          console.log("e", e);
          this.reportSystem.backgroundImage = "url(" + require("@/assets/img/LIS420/background.png") + ")";
        });
    },
    //定时测试连接
    testConnect() {
      return new Promise((s, f) => {
        this.$tool
          .request({
            url: "REQ/REQ1/REQ130",
            method: "post",
            data: {
              action: "testConnect",
            },
          })
          .then((res) => {
            if (res.errcode != 1) {
              this.connectErr = true; //连接失败
            } else {
              this.connectErr = false;
            }
            let t = 120000; //2分钟验证一次网络
            if (this.connectErr) {
              t = 15000; // 断网时，为了快速重连，15秒重试一次
            }
            setTimeout(() => {
              this.testConnect();
            }, t);
          })
          .catch((e) => {
            this.connectErr = true;
            setTimeout(() => {
              this.testConnect();
            }, 15000);
          });
      });
    },
    getPImg(num) {
      //网络出错不允许用户输入
      if (!this.connectErr) {
        if (num == "space") {
          if (this.cardbarcode.length > 0) {
            this.cardbarcode = this.cardbarcode.substring(0, this.cardbarcode.length - 1);
          }
        } else {
          var regex = /^[A-Za-z0-9_\-]+$/gi;
          var result = regex.test(this.cardbarcode);
          if (result) {
            this.cardbarcode += num;
          } else {
            this.cardbarcode = num;
          }
        }
        this.resetFlag = 60;
        this.autoReset(this.resetFlag, this);
      }
    },
    btnConfirm() {
      //确定按钮
      this.query();
    },
    btnCancel(that) {
      if (!that) that = this;
      that.resetFlag = -1;
      that.txtbarcode = "";
      that.cardbarcode = "";
      if (document.activeElement.id != "barcodediv") {
        console.log("S23");
        this.setFocus();
      }
    },
    cardbarkeypress() {
      this.resetFlag = 5;
      this.autoReset(this.resetFlag, this);
    },
    autoReset(flag, that) {
      if (that.resetFlag > 0) {
        setTimeout(() => {
          if (flag == that.resetFlag) {
            //多线程，仅最后一次线程有效
            that.resetFlag--;
            that.autoReset(that.resetFlag, that);
          }
        }, 1000);
      } else if (that.resetFlag == 0) {
        that.btnCancel(that);
      }
    },
    query() {
      if (this.txtbarcode == "13311667706") {
        this.btnClose();
        return false;
      }
      //设备故障，网络报错时，不往下执行
      if (this.connectErr) {
        this.btnCancel(this); //清空主界面
        return false;
      }
      this.resetFlag = -1; //查询时，清空输入标记
      this.$tool
        .request({
          url: "REQ/REQ1/REQ130",
          method: "post",
          data: {
            action: "query",
            txtbarcode: this.txtbarcode,
          },
        })
        .then((res) => {
          if (res.flag == "1") {
            //执行打印
            if (this.queueprintstyle != "") {
              var arr = [];
              arr.push(res);
              //title
              let strJson = JSON.stringify([{ title: "排队号码", property: "queueseqdisplay" }, { title: "病人姓名", property: "queryname" }, { title: "提示文字", property: "tipwords" }, { title: "等待人数", property: "waitnum" }]);
              strJson += "\r";
              strJson += JSON.stringify(arr);//数据
              let sql = btoa(encodeURIComponent(strJson));
              jsObj.PrintCustomJsonReport(this.queueprintstyle, sql, this.$tool.getSession(this.$tool.loginuserno), "排队标签样式", "");
            } else {
              this.$alert("没有设置打印样式", "错误", {
                confirmButtonText: "确定",
              });
            }
            //this.$message.success("取号成功!");
            this.btnCancel(this); //清空主界面
            this.queue_patname = res.queryname;
            this.queue_patno = res.queryno;
            this.queue_queueno = res.queueseqdisplay;
            this.queue_waitno = res.waitnum;
            this.autocloseQueueTips();
          }
          else {
            this.btnCancel(this); //清空主界面
            this.msgtips = res.msg;
            this.autocloseTips();
          }
        })
        .catch((e) => {
          console.log("error", e);
        });
    },
    btnClose() {
      if (typeof jsObj != "undefined") {
        jsObj.CloseWindow();
      } else {
        this.$alert("请使用" + this.$pub.clientname + "打开系统", "错误", {
          confirmButtonText: "确定",
        });
      }
    },
    autocloseTips() {
      this.showtips = true;
      setTimeout(() => {
        this.showtips = false;
        this.msgtips = "";
      }, 5000);
    },
    autocloseQueueTips() {
      this.showsucessinfo = true;
      setTimeout(() => {
        this.showsucessinfo = false;
        this.queue_patname = "";
        this.queue_patno = "";
        this.queue_queueno = "";
        this.queue_waitno = "";
      }, 5000);
    },
  },
}
</script>

<style scoped>
.report-system {
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.fakeinput {
  background-color: #fff;
  color: #00f;
  font-size: 28px;
  font-weight: 900;
  height: 50px;
  width: 50%;
  line-height: 50px;
  margin: auto;
  -webkit-box-shadow: 0px 7px 7px #c8c8c8 inset;
}

.queuename {
  color: rgb(65, 61, 61);
  font-size: 50px;
  font-weight: 900;
  height: 50px;
  width: 50%;
  line-height: 50px;
  margin: auto;
}

.tips {
  color: rgb(65, 61, 61);
  font-size: 35px;
  font-weight: 600;
  height: 50px;
  width: 50%;
  line-height: 50px;
  margin: auto;
}

.fakebarcodeinput {
  height: 100%;
  width: 100%;
  color: #00f;
  padding-left: 10px;
}

.imgstyle2 {
  width: 80px;
  height: 50px;
}

.imgstyle4 {
  width: 65px;
  height: 65px;
}

.table3style tr td {
  padding: 0 20px 20px 0;
  text-align: left;
}

.pagebottom {
  position: absolute;
  -webkit-box-pack: center;
  -webkit-box-align: bottom;
  text-align: center;
  bottom: 0px;
  width: 100%;
  height: 40px;
  right: 0px;
}

.pagebottomimg {
  width: 300px;
  height: 30px;
  margin-top: 5px;
}

.err-div {
  height: 70%;
  color: red;
  font-size: 48px;
  text-align: center;
  padding: 20px;
}

.tip-div {
  height: 70%;
  color: rgb(50, 146, 205);
  font-size: 48px;
  text-align: center;
  padding: 10px;
}

.sucess-div {
  height: 70%;
  font-size: 25px;
  text-align: left;
  padding: 3px;
}

.sucess-info {
  height: 70%;
  font-size: 20px;
  text-align: left;
  padding: 3px;
}
</style>
